// src/App.tsx
import React, { useEffect } from "react";
import { useAppSelector } from "@/hooks/useRedux";
import { THEMES } from "@/store/themeSlice";
import AppRoutes from "./routes"; // 导入路由配置
import "./assets/styles/global.less";

function App() {
  const currentTheme = useAppSelector((state) => state.theme.currentTheme);
  // 主题变化时更新根元素类名
  useEffect(() => {
    const root = document.documentElement;
    // 移除所有旧主题类名
    THEMES.forEach((theme) => root.classList.remove(`${theme}-theme`));

    // 添加当前主题类名（默认主题不需要类名）
    if (currentTheme !== "default") {
      root.classList.add(`${currentTheme}-theme`);
    }
  }, [currentTheme]);

  return (
    <div className="app-container">
      <AppRoutes />
    </div>
  );
}

export default App;
